{extend name="template/base" /}
{block name="content"}
<!--select2样式 start -->
<link href="__LIB__/select2-4.0.3/dist/css/select2.min.css" rel="stylesheet" />
<!--select2样式 end -->
<link rel="stylesheet" href="/static/admin/layui-xia/css/layui.css" media="all"/>
<link rel="stylesheet" href="/static/admin/formSelects/dist/formSelects-v4.css">
<script type="text/javascript" src="/static/admin/layui-xia/layui.js"></script>
<div class="page-container">
    {php} use think\Db; {/php}
    <br><br><br>
    <!--分配住宿-->
    <form class="form form-horizontal" id="form1" onsubmit="return false" method="post" action="###">
        <input type="hidden" name="portionId" id="portion_id" value="{$id}">
        <table class="table table-border table-bordered">
            <tr id="#add_tr">
                <th style="text-align: center">ID</th>
                <th style="text-align: center">线路名称</th>
                <th style="text-align: center">司机姓名</th>
                <th style="text-align: center">分组id</th>
                <th style="text-align: center">组合姓名</th>
                <th style="text-align: center">住宿备注</th>
                <th style="text-align: center">入住日期</th>
                <th style="text-align: center">退房日期</th>
                <th style="text-align: center">酒店名称</th>
                <th style="text-align: center">酒店房型</th>
            </tr>

            <tr>
                <td colspan="10" style="text-align: center">
                    <input class="btn btn-primary size-M radius" id="btn01" type="submit" value="保存更新" onclick="submitTraveller()">
                </td>
            </tr>
        </table>
    </form>
</div>
{/block}
{block name="script"}
<script type="text/javascript" src="__LIB__/Validform/5.3.2/Validform.min.js"></script>
<script type="text/javascript" src="__LIB__/My97DatePicker/WdatePicker.js"></script>
<!--select2 js 插件-->
<script type="text/javascript" src="__LIB__/select2-4.0.3/dist/js/select2.min.js"></script>
<style>
    element .style {
        width: 100px;
    }
    .shang{
        position: relative;
        top: -2px;
    }
    .jian{
        position: relative;
        top: 2px;
    }
</style>

<script>
    // 获取派单旅客住宿信息
    $(function () {
        // 输出当前的派单id
        // console.log('派单id', $('#portion_id').val())
        var portionId = $('#portion_id').val();
        if (!portionId){
            layer.msg('缺少重要的参数');
            return false;
        }
        $.ajax({
            type: 'POST',
            url: '/admin/portion_traveler/getInfo',
            data: {id: portionId},
            success: function (ret) {
                console.log('ret', ret)
                if (ret.code == 1){
                    layer.msg(ret.msg);
                    return false;
                } else {
                    var hotelAccommodation = ret.data.hotelAccommodation; // 酒店旅客信息列表
                    var hotelLength = hotelAccommodation.length;
                    var hotelData = ret.data.hotel; // 获取酒店列表
                    var hotelLen = hotelData.length; // 获取酒店长度
                    if (hotelLength) {
                        var jishu = 1;
                        for (var j = 0;j < hotelLength; j++) {
                            $.each($('#form1 tbody tr'), function (i, tr) {
                                if ($(this).attr('id') == '#add_tr'){
                                    // 获取当前行
                                    var currentRow = $('#form1 tbody tr:eq('+i+')');
                                    var hotelId = 'hotel_id' + jishu;
                                    var roomTypeId = 'room_type' + jishu;
                                    jishu++;
                                    // 追加tr
                                    currentRow.after('<tr><input type="hidden" name="groupIds[]" value="'+hotelAccommodation[j].group_id+'"/>' +
                                        '<input type="hidden" name="ids[]" value="'+hotelAccommodation[j].id+'"/>' +
                                        '<td style="text-align: center">'+hotelAccommodation[j].id+'</td>' +
                                        '<td style="text-align: center">'+hotelAccommodation[j].route_name+'</td>' +
                                        '<td style="text-align: center">'+hotelAccommodation[j].realname+'</td>' +
                                        '<td style="text-align: center">'+hotelAccommodation[j].group_id+'</td>' +
                                        '<td style="text-align: center">'+hotelAccommodation[j].name+'</td>' +
                                        '<td style="text-align: center">'+hotelAccommodation[j].remark+'</td>' +
                                        '<td style="text-align: center"><input type="text" class="input-text Wdate" style="width:180px" autocomplete="off" placeholder="入住日期" name="check_in_date[]" value="'+hotelAccommodation[j].check_in_date+'" {literal} onfocus="WdatePicker({dateFmt:\'yyyy-MM-dd\'})" {/literal} ></td>' +
                                        '<td style="text-align: center"><input type="text" class="input-text Wdate" style="width:180px" autocomplete="off" placeholder="退房日期" name="end_date[]" value="'+hotelAccommodation[j].end_date+'" {literal} onfocus="WdatePicker({dateFmt:\'yyyy-MM-dd\'})" {/literal} ></td>' +
                                        '<td style="text-align: center">' +
                                        '<select  name="hotel_id[]" class="select2 hotel_id" id="'+hotelId+'" onchange="getRoomTypeList(this[selectedIndex].value, \''+roomTypeId+'\')">' +
                                        '<option value="">选择酒店</option>' +
                                        '</select>' +
                                        '</td>' +
                                        '<td style="text-align: center">' +
                                        '<select  name="room_type_id[]" class="select2 room_type" id="' + roomTypeId + '">' +
                                        '<option value="">请选择房型</option>' +
                                        '</select>' +
                                        '</td>' +
                                        '</tr>');
                                    // 追加酒店列表
                                    if (hotelLen){
                                        $(hotelId).empty();// 清空选项
                                        for(var k=0; k < hotelLen; k++){
                                            $('#' + hotelId).append("<option value='"+hotelData[k].id+"'>"+hotelData[k].hotel_name+"</option>");
                                            $("#" + hotelId).val(hotelAccommodation[j].hotel_id);
                                        }
                                    }
                                    $('#'+hotelId).select2({
                                        language: "zh-CN", //设置 提示语言
                                        width: "100%", //设置下拉框的宽度
                                        theme: "classic"
                                    });
                                    // 获取酒店房型
                                    var roomType = hotelAccommodation[j].hotel_room_type
                                    $.ajax({
                                        type: 'POST',
                                        url: '/admin/portion_traveler/getRoomType',
                                        data: {hotel_id: hotelAccommodation[j].hotel_id},
                                        success: function (ret) {
                                            if (ret.code == 1){
                                                layer.msg(ret.msg);
                                                return false;
                                            }else{
                                                // 获取数据成功
                                                var data = ret.data;
                                                // console.log('获取到的房型', data)
                                                var len = data.length
                                                if (!len) {
                                                    // 没有房型
                                                    layer.msg('该酒店还没有添加房型')
                                                } else {
                                                    for (var ri = 0; ri < len; ri++) {
                                                        $('#' + roomTypeId).append("<option value='" + data[ri].room_type_id + "'>" + data[ri].room_type_name + "</option>")
                                                        $('#' + roomTypeId).val(roomType);
                                                    }
                                                }
                                            }
                                        }
                                    });
                                    $('#'+roomTypeId).select2({
                                        language: "zh-CN", //设置 提示语言
                                        width: "100%", //设置下拉框的宽度
                                        theme: "classic"
                                    });
                                }
                            });
                        }
                    }
                }
            }
        })
    });
</script>

<script>
    function getRoomTypeList(val, room_type) {
        console.log('val', val);
        console.log('room_type', room_type);
        if (!val){
            layer.msg('请选择酒店');
            return false;
        }
        // 清空房型
        $('#' +room_type).empty();
        $('#' + room_type).append("<option value=''>" + '请选择房型' + "</option>")
        $('#' +room_type + ' option:eq(0)').attr('selected', 'selected');//选中第一个
        // 根据酒店id获取酒店房型
        $.ajax({
            type: 'POST',
            url: '/admin/portion_traveler/getRoomType',
            data: {hotel_id: val},
            success: function (ret) {
                if (ret.code == 1){
                    layer.msg(ret.msg);
                    location.reload();
                    return false;
                }else{
                    // 获取数据成功
                    var data = ret.data;
                    console.log('获取到的房型', data)
                    var len = data.length
                    if (!len) {
                        // 没有房型
                        layer.msg('该酒店还没有添加房型')
                    } else {
                        for (var i = 0; i < len; i++) {
                            $('#' + room_type).append("<option value='" + data[i].room_type_id + "'>" + data[i].room_type_name + "</option>")
                            $('#' +room_type + ' option:eq(0)').attr('selected', 'selected');//选中第一个
                        }
                    }
                }
            }
        });
    }

</script>

<script>
    function submitTraveller() {
        // console.log($('#form1').serializeArray());
        var data = $('#form1').serialize();
        $.ajax({
            type: 'POST',
            url: '/admin/portion_traveler/allocated',
            data: data,
            success: function (ret) {
                console.log('ret', ret)
                if (ret.code == 1){
                    layer.msg(ret.msg);
                    return false;
                } else{
                    layer.msg(ret.msg);
                    // location.reload();
                    // 刷新页面
                    parent.window.location.href = '/admin/portion_traveler/index';
                    var index = parent.layer.getFrameIndex(window.name);
                    // 关闭弹出层
                    parent.layer.close(index);
                }
            }
        });
    }
</script>

<script>
    var hotel_id = $(".hotel_id").select2({
        language: "zh-CN", //设置 提示语言
        width: "100%", //设置下拉框的宽度
        theme: "classic"
    });
    {notempty name = "vo['hotel_id']"}
    hotel_id.val("{$vo['hotel_id']}").trigger("change");
    {/notempty}

</script>
<script>
    // room_type_id
    var room_type_id = $(".room_type_id").select2({
        language: "zh-CN", //设置 提示语言
        width: "100%", //设置下拉框的宽度
        theme: "classic"
    });
    {notempty name = "vo['room_type_id']"}
    room_type_id.val("{$vo['room_type_id']}").trigger("change");
    {/notempty}
</script>




{/block}